<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="utf-8" />
	<title>em单位</title>
	<style>
		body {
			margin: 0;
		}


		.container{
			display: flex;
		}

		.box {
			flex: 1;
			line-height: 100px;
			background-color: green;
			color: antiquewhite;
			text-align: center;
			margin-bottom: 10px;
		}

		.test{
			background-color: hotpink;
			color: antiquewhite;
			font-size: 20px;
			margin-bottom: 10px;
		}

		.test2{
			background-color: #FF9800;
			color: white;
			font-size: 20px;
			line-height: 3em;
			padding: 1em;
			border: 0.5em solid blueviolet;
			margin: 1em;
		}
	</style>
</head>

<body>

<div class="container">
	<div class="box" style="font-size: 16px;">
		font-size: 16px
	</div>

	<div class="box" style="font-size: 1em;">
		font-size: 1em
	</div>

	<div class="box" style="font-size: 2em;">
		font-size: 2em
	</div>
</div>

<div class="container" style="font-size: 12px;">
	<div class="box">
		父元素：font-size: 12px
	</div>

	<div class="box" style="font-size: 1em;">
		font-size: 1em
	</div>

	<div class="box" style="font-size: 2em;">
		font-size: 2em
	</div>
</div>

<div class="test">
	font-size: 20px;
	line-height: 默认;
</div>

<div class="test" style="line-height: 1em;">
	font-size: 20px;
	line-height: 1em;
</div>

<div class="test" style="line-height: 2em;">
	font-size: 20px;
	line-height: 2em;
</div>

<div style="font-size: 16px;">
	font-size: 16px;
	<div style="font-size: 2em;">
		font-size: 2em;
		<div style="font-size: 2em;">
			font-size: 2em;
			
		</div>
	</div>
</div>

<div class="test2">
	font-size: 20px;
</div>

</body>

</html>